<!DOCTYPE html>
<!-- saved from url=(0046)https://www.jq22.com/demo/zeSlide201707262343/ -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <title>zpSlide</title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }

        * {
            box-sizing: border-box;
        }

        img {
            max-width: 100%;
        }

        .zp-slide {
            overflow: hidden;
            position: relative;
        }

        .zp-slide > ul {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 1600%;
            transition: all 0.3s;
            transform: translate3d(0px, 0px, 0px);
        }

        .zp-slide > ul > li {
            float: left;
        }

        [class^=zp-slide-] {
            display: block;
            position: absolute;
            width: 30px;
            height: 30px;
            top: 50%;
            margin-top: -15px;
            left: 30px;
            opacity: 0.5;
        }

        [class^=zp-slide-]:hover {
            opacity: 1;
        }

        .zp-slide-right {
            left: auto;
            right: 30px;
        }
    </style>
</head>
<body style="">
<div class="zp-slide">
    <ul style="transform: translate3d(-910.667px, 0px, 0px);">
        <li style="width: 455.333px;">
            <a href="https://www.jq22.com/demo/zeSlide201707262343/">
                <img src="./zpSlide_files/a1.png">
            </a>
        </li>
        <li style="width: 455.333px;">
            <a href="https://www.jq22.com/demo/zeSlide201707262343/">
                <img src="./zpSlide_files/a2.png">
            </a>
        </li>
        <li style="width: 455.333px;">
            <a href="https://www.jq22.com/demo/zeSlide201707262343/">
                <img src="./zpSlide_files/a3.png">
            </a>
        </li>
        <li style="width: 455.333px;">
            <a href="https://www.jq22.com/demo/zeSlide201707262343/">
                <img src="./zpSlide_files/a4.png">
            </a>
        </li>
        <li style="width: 455.333px;">
            <a href="https://www.jq22.com/demo/zeSlide201707262343/">
                <img src="./zpSlide_files/a5.png">
            </a>
        </li>
        <li style="width: 455.333px;">
            <a href="https://www.jq22.com/demo/zeSlide201707262343/">
                <img src="./zpSlide_files/a3.png">
            </a>
        </li>
    </ul>


    <a href="javascript:void(0)" class="zp-slide-left"><img src="./zpSlide_files/zp-left.png"></a>
    <a href="javascript:void(0)" class="zp-slide-right"><img src="./zpSlide_files/zp-right.png"></a>
</div>

<script src="./zpSlide_files/jquery-1.10.2.js.下载"></script>
<script src="./zpSlide_files/jquery.min.js.下载"></script>
<script src="./zpSlide_files/zpSlide.js.下载" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function () {
        $('.zp-slide').zpSlide({
            original: 1,     	//414px小屏幕，默认显示1个
            xs: 1,           	//640px小屏幕，默认显示2个，当前自定义显示1个
            sm: 2,           	//768px中屏幕，默认显示3个，当前自定义显示2个
            md: 3,           	//1024px中屏幕，默认显示4个，当前自定义显示3个
            lg: 3,          		//1280px大屏幕，默认显示5个，当前自定义显示3个
            autoPlay: true, 	    //自动播放，默认true，当前定义true
            intervalTime: 4000   //自动播放时间，默认3秒，当前定义4秒
        });
    })
</script>

</body>
</html>